<div class="container-fluid" style="margin-top:50px;">
    <!--        <div class="col-md-2 pickList">
            <div class="row" style="margin-top:50px;">
                <div class="col-md-8 col-md-offset-4">
                    <div style="background-color:#5CB85C;color:white;width:100%;text-align:center;font-size:20px;font-weight:700;padding:10px;">待选列表</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-4">
                    <ul class="nav nav-pills nav-stacked" style="background-color:white;" role="tablist">
                        <li role="presentation" class="active"><a href="#">Home</a>
                        </li>
                        <li role="presentation"><a href="#">Profile</a>
                        </li>
                        <li role="presentation"><a href="#">Messages</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div> -->
    <div class="row" id="enter-email" style="display:none;">
        <div class="col-md-12 bg-info emailHint">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="row">
                        <div class="form-group form-horizontal">
                            <label for="inputEmail3" class="col-md-5 control-label" style="margin-top:5px;font-size:14px;">我们正在不断努力改进网站，欲知后事如何，请您留下邮箱(●'◡'●)ﾉ♥</label>
                            <div class="col-md-3" style="margin-top:5px;">
                                <input type="email" ng-model="userEmail" class="form-control" id="inputEmail3">
                            </div>
                            <div class="col-md-2" style="margin-top:5px;">
                                <button class="btn btn-success btn-block" ng-click="saveEmail()">赏你了！</button>

                            </div>
                            <div class="col-md-2" style="margin-top:5px;">
                                <button class="btn btn-danger btn-block" ng-click="closeEmail()">残忍拒绝</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 col-md-12 infoNote">
                    <h2 class="infoNoteLabel">个人信息</h2>
                    <div class="row" ng-class="{loading : !githuber.isLoaded, hidden : githuber.isLoaded}"><div class="loader"></div></div>
                    <div class="row" ng-class="{hidden : !githuber.isSuccessLoaded}" style="margin-top:30px;padding:30px;">
                        <div class="col-md-2 col-md-offset-1">
                            <div class="row">
                                <div class="col-md-12">
                                    <img src="{{githuber.avatar_url}}" alt="" class="img-responsive" style="border-radius:10px;">
                                </div>
                            </div>
                            <div class="row" style="margin-top:5px;">
                                <div class="col-md-12">
                                    <button class="btn btn-large btn-success btn-block" id="new-feature">???</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <ul class="list-unstyled">
                                <li>
                                    <h4>{{githuber.name || githuber.login}}{{githuber.name && "(" + githuber.login + ")"}}</h4>
                                </li>
                                <li>公司：{{githuber.company || "无"}}</li>
                                <li>邮箱：{{githuber.email || "无"}}</li>
                                <li>加入GitHub <span style="font-size:34px;" class="info-number">{{githuber.day}}</span> 天</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <ul class="list-unstyled" style="margin-top:-10px">
                                <li>
                                    {{githuber.name || githuber.login}}有<span style="font-size:34px;" class="info-number">{{githuber.followers}}</span>个粉丝
                                </li>
                                <li><span style="font-size:34px;" class="info-number">{{githuber.public_repos}}</span>个项目</li>
                                <li><span style="font-size:34px;" class="info-number">{{githuber.codings}}</span>字节代码</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row" ng-class="{hidden : !githuber.isErrorLoaded}" style="margin-top:30px;padding:30px;text-align:center;">
                        <p style="font-size:20px;">没有找到{{githuber.login}}，要不就是这人没注册GitHub，要不就是你输错了用户名，总之我才不会犯错呢，哼(╯￣Д￣)╯╘═╛</p>
                    </div>
                </div>
            </div>
            <div class="row" ng-class="{hidden: githuber.isErrorLoaded}">
                <div class="col-lg-10 col-lg-offset-1 col-md-12 infoNote">

                    <h2 class="infoNoteLabel">特性分析</h2>
                    <div class="row spec-info" style="margin-top:30px;padding:0px;text-align:center;">
                        <div class="row" ng-class="{loading : !byteChart.isLoaded, hidden : byteChart.isLoaded}"><div class="loader"></div></div>
                        <div class="col-md-12" id="byte-chart" ng-class="{hidden : !byteChart.isSuccessLoaded}">
                        </div>
                        <div class="col-md-12" id="byte-chart" ng-class="{hidden : !byteChart.isErrorLoaded}">
                            <p style="font-size:20px;">{{githuber.login}}根本就没有项目(╯￣Д￣)╯╘═╛</p>
                        </div>
                    </div>
                    <div class="row spec-info" style="margin-top:30px;padding:0px;text-align:center;">
                        <div class="row" ng-class="{loading : !weekChart.isLoaded, hidden : weekChart.isLoaded}"><div class="loader"></div></div>
                        <div class="col-md-12" style="height:600px;" id="week-chart" ng-class="{hidden : !weekChart.isSuccessLoaded}">
                        </div>
                        <div class="col-md-12" id="week-chart" ng-class="{hidden : !weekChart.isErrorLoaded}" style="text-align:center;">
                            <p style="font-size:20px;">{{githuber.login}}的每周动态无法获取= =</p>
                        </div>
                    </div>
                    <div class="row spec-info" style="margin-top:30px;padding:0px;text-align:center;">
                        <div class="row" ng-class="{loading : !dayChart.isLoaded, hidden : dayChart.isLoaded}"><div class="loader"></div></div>
                        <div class="col-md-12" style="height:600px;" id="day-chart" ng-class="{hidden : !dayChart.isSuccessLoaded}">
                        </div>
                        <div class="col-md-12" id="day-chart" ng-class="{hidden : !dayChart.isErrorLoaded}" style="text-align:center;">
                            <p style="font-size:20px;">{{githuber.login}}的每日动态无法获取= =</p>
                        </div>
                    </div>
                    <div class="row spec-info" style="margin-top:30px;padding:0px;text-align:center;">
                        <div class="row" ng-class="{loading : !starChart.isLoaded, hidden : starChart.isLoaded}"><div class="loader"></div></div>
                        <div class="col-md-12" style="height:600px;" id="star-chart" ng-class="{hidden : !starChart.isSuccessLoaded}">
                        </div>
                        <div class="col-md-12" id="star-chart" ng-class="{hidden : !starChart.isErrorLoaded}" style="text-align:center;">
                            <p style="font-size:20px;">{{githuber.login}}没有Star任何项目(╯￣Д￣)╯╘═╛</p>
                        </div>
                        <!--   <div class="col-md-6" style="height:600px;" id="contribution-chart">
                            </div> -->
                    </div>
                </div>
            </div>
            <div class="row" ng-class="{hidden: githuber.isErrorLoaded}">
                <div class="col-lg-10 col-lg-offset-1 col-md-12 infoNote">
                    <h2 class="infoNoteLabel">项目统计</h2>
                    <div class="row" style="margin-top:30px;padding:30px;">
                        <div class="row" ng-class="{loading : !byteChart.isLoaded, hidden : byteChart.isLoaded}"><div class="loader"></div></div>
                        <div class="col-md-12" id="repo-details" ng-class="{hidden : !byteChart.isSuccessLoaded}">
                        </div>
                        <div class="col-md-12" id="repo-details" ng-class="{hidden : !byteChart.isErrorLoaded}" style="text-align:center;">
                            <p style="font-size:20px;">{{githuber.login}}根本就没有项目(╯￣Д￣)╯╘═╛</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="new-feature-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title">这个按钮......</h4>
            </div>
            <div class="modal-body"style="word-wrap:break-word;">
            <p>
                这个按钮是什么呢？可能是加入待选列表，可能是多人横向对比，可能是导出详细信息，可能是.....
            </p>
            <p>
                这个问题交给你，你想要什么呢？请点击右上角的“提点建议”告诉我们。下一个版本中我们一定会让这个按钮“给你好看”！
            </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="repo-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title" id="repo-modal-name"></h4>
            </div>
            <div class="modal-body" id="repo-modal-content" style="overflow-y:scroll;word-wrap:break-word;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
